import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { message } from 'antd'

export enum LanguageEnum {
    ZN_CH = 'zh-cn', // 中文简体
    ZN_HK = 'zh-hk', // 中国香港
    ZH_TW = 'zh-tw', // 中国台湾
    EN_US = 'en-us', // 英语
}

export type historyRouting = {
    title: string
    path: string
    params?: any
}

export type PayloadActionHistoryRoutingList = {
    type: 'DEL' | 'ADD' | 'DELOTHER'
    payload: historyRouting | string
}

export type Theme = 'light' | 'dark'

export interface SettingInitialState {
    theme: Theme // 主题
    langauge: LanguageEnum // 语言
    collapsed: boolean // 折叠菜单
    sidebarWidth: number // 侧边栏宽度
    fixedHeader: boolean // 固定头部
    showFooter: boolean // 显示页脚
    greyModel: boolean // 灰色模式
    tritanopeModel: boolean // 色弱模式
    oneParentMenu: boolean // 只保持一个父级菜单展开
    historyRoutingList: historyRouting[] // 历史路由列表
}

// 初始状态
const initialState: SettingInitialState = {
    theme: 'light',
    langauge: LanguageEnum.ZN_CH,
    collapsed: false,
    sidebarWidth: 256,
    fixedHeader: true,
    showFooter: true,
    greyModel: false,
    tritanopeModel: false,
    oneParentMenu: false,
    historyRoutingList: [],
}

// 系统状态
const settingSlice = createSlice({
    name: 'setting',
    initialState,
    reducers: {
        // 改变主题
        changeTheme: (state, action: PayloadAction<Theme>) => {
            state.theme = action.payload
            if (action.payload === 'dark') {
                document.documentElement.className = 'theme-dark'
            } else {
                document.documentElement.className = 'theme-light'
            }
        },

        // 改变语言
        changeLangauge: (state, action: PayloadAction<LanguageEnum>) => {
            state.langauge = action.payload
        },

        // 改变侧边栏折叠状态
        changeCollapsed: (state, action: PayloadAction<boolean>) => {
            state.collapsed = action.payload
        },

        // 改变侧边栏宽度
        changeSidebarWidth: (state, action: PayloadAction<number>) => {
            state.sidebarWidth = action.payload
        },

        // 改变是否固定头部
        changeFixedHeader: (state, action: PayloadAction<boolean>) => {
            state.fixedHeader = action.payload
        },

        // 改变是否显示页脚
        changeShowFooter: (state, action: PayloadAction<boolean>) => {
            state.showFooter = action.payload
        },

        // 改变灰色模式
        changeGreyModel: (state, action: PayloadAction<boolean>) => {
            const dom = document.getElementsByTagName('html')[0]
            if (action.payload) {
                dom.classList.add('grey-model')
            } else {
                dom.classList.remove('grey-model')
            }
            state.greyModel = action.payload
        },

        // 改变色弱模式
        changeTritanopeModel: (state, action: PayloadAction<boolean>) => {
            const dom = document.getElementsByTagName('html')[0]
            if (action.payload) {
                dom.classList.add('tritanope-model')
            } else {
                dom.classList.remove('tritanope-model')
            }
            state.tritanopeModel = action.payload
        },

        // 改变菜单聚焦
        changeOneParentMenu: (state, action: PayloadAction<boolean>) => {
            state.oneParentMenu = action.payload
        },

        // 重置设置
        onResetSettings: (state: any) => {
            const initState: any = initialState
            let timer: any = null
            clearTimeout(timer)
            for (const key in initState) {
                if (Object.prototype.hasOwnProperty.call(initState, key)) {
                    state[key] = initState[key]
                }
            }
            message.loading('系统重置中...')
            timer = setTimeout(() => {
                window.location.reload()
            }, 2000)
        },

        // 改变历史路由列表
        changeHistoryRoutingList: (state, action: PayloadAction<PayloadActionHistoryRoutingList>) => {
            if (action.payload.type === 'ADD') {
                // 查询当前路由是否已经添加过
                const index = state.historyRoutingList.findIndex((item) => {
                    const payload = action.payload.payload as historyRouting
                    return payload.path === item.path
                })
                if (index === -1) {
                    // 新增
                    state.historyRoutingList.push(action.payload.payload! as historyRouting)
                } else {
                    // 替换
                    state.historyRoutingList.splice(index, 1, action.payload.payload! as historyRouting)
                }
            } else if (action.payload.type === 'DELOTHER') {
                // 删除除当前高亮外的历史路由
                state.historyRoutingList = state.historyRoutingList.filter((item) => item.path === action.payload.payload)
            } else {
                // 删除单个
                if (action.payload.payload) {
                    state.historyRoutingList = state.historyRoutingList.filter((item) => item.path !== action.payload.payload)
                    return
                }

                // 删除全部
                state.historyRoutingList = []
            }
        },
    },
})

export const {
    changeTheme,
    changeLangauge,
    changeCollapsed,
    changeSidebarWidth,
    changeFixedHeader,
    changeShowFooter,
    changeGreyModel,
    changeTritanopeModel,
    changeOneParentMenu,
    changeHistoryRoutingList,
    onResetSettings
} = settingSlice.actions

export default settingSlice
